import {
    PageHeader,
    Checkbox,
    Form,
    Input,
    Button,
    Row,
    Col,
    InputNumber,
    Select,
    Switch
} from 'antd';
import { useNavigate } from "react-router-dom"
import CateSelect from './components/CateSelect'
import GoodUpload from './components/GoodUpload';

import "./style.scss"

export default (props) => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const onFinish = (values) => {
        console.log(values);
    };
    return (
        <div className='good-form'>
            <PageHeader
                className="site-page-header"
                onBack={() => navigate(-1)}
                title="商品新增"
                style={{ background: "#fff" }}
            />
            <div className="form">
                <Form
                    form={form}
                    name="goodAddEdit"
                    labelCol={{ span: 2 }}
                    wrapperCol={{ span: 10 }}
                    labelAlign="left"
                    validateTrigger="onBlur"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="name"
                        label="商品名称"
                        rules={[
                            { required: true, message: "商品名称是必填项" },
                            { pattern: /[\u4E00-\u9FA5]{4,6}/, message: "商品名称要求是4~6个汉字" },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="desc"
                        label="商品描述"
                        rules={[
                            { required: true, message: "商品描述是必填项" },
                            { min: 10, max: 30, message: "商品描述要求10~20个字符" }
                        ]}
                    >
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item
                        name="cate"
                        label="商品品类"
                        rules={[
                            { required: true, message: "商品品类是必填项" }
                        ]}
                    >
                        <CateSelect />
                    </Form.Item>
                    <Form.Item
                        name="price"
                        label="商品价格"
                        rules={[
                            { required: true, message: "商品价格是必填项" }
                        ]}
                    >
                        <InputNumber />
                    </Form.Item>
                    {/* 
                        Form.Item可以帮我们自动收集数据，只要被Form.Item包裹的表单，相当于给它了一个value+onChange 
                    */}
                    <Form.Item
                        name="hot"
                        label="是否热销"
                        valuePropName='checked'
                        rules={[
                            // { required: true, message: "商品价格是必填项" }
                        ]}
                    >
                        <Switch />
                    </Form.Item>
                    <Form.Item
                        name="img"
                        label="商品图片"
                        rules={[
                            // { required: true, message: "商品价格是必填项" }
                        ]}
                    >
                        <GoodUpload />
                    </Form.Item>

                    <Form.Item>
                        <Button type='primary' htmlType='submit'>提交</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}